<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			#main {
				width: 1000px;
				height: 50px;
				background-color: #0076f6;
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin: 20px 20px 0;
				border-radius: 10px 10px 0 0;
			}

			.btn {
				width: 100px;
				line-height: 30px;
				height: 30px;
				background-color: #fff;
				text-align: center;
				border-radius: 10px;
				cursor: pointer;
			}

			#canvas {
				border: solid #0076f6 1px;
				margin-left: 20px;
			}

			.active {
				color: #0076f6;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<div class="btn" id="huabi">画笔</div>
			<div class="btn">矩形</div>
			<div class="btn">圆形</div>
			<div class="btn">线段粗细</div>
			<div class="btn">画笔颜色</div>
			<div class="btn">橡皮擦</div>
		</div>
		<canvas id="canvas" width="998" height="500"></canvas>
		<script type="text/javascript">
			/* 方法获取HTML <canvas> 元素的引用并获取这个元素的context——图像稍后将在此被渲染 */
			const canvas = document.getElementById('canvas');
			const ctx = canvas.getContext('2d');
			// 设置canvasde的宽度和高度
			canvas.setAttribute('width', canvas.offsetWidth);
			canvas.setAttribute('height', canvas.offsetHeight);

			let huaban = {
				type: 'nane'
			}

			/* 画笔 */
			let huabiBtn = document.querySelector('#huabi');
			huabiBtn.onclick = function() {
				console.log(123);
				huabiBtn.classList.add('active');
				huaban = {
					type: '画笔'
				}
			}
		</script>
	</body>
</html>
